@extends('layout.home.master')
@section('content')
    <div class="container mt-4">
        <div class="row mt-2">
            <div class="col-9">
                <!-- Files -->
                <div class="card" data-toggle="lists" data-lists-values="[&quot;name&quot;]">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col">

                                <!-- Title -->
                                <h4 class="card-header-title">
                                    文章
                                </h4>

                            </div>
                            <div class="col-auto">
                                <!-- Button -->
                                <a href="{{route('article.create')}}" class="btn btn-sm btn-primary">
                                    发表
                                </a>
                            </div>
                        </div> <!-- / .row -->
                    </div>
                    <div class="card-body">
                        <!-- List -->
                        <ul class="list-group list-group-lg list-group-flush list my--4">
                            <li class="list-group-item px-0">
                                @foreach($articles as $article)
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <!-- Avatar -->
                                        <div class="avatar">
                                            <a href="{{route('info.user.show',$article->user)}}">
                                                <img src="{{$article->user->icon}}" alt="..." class="avatar-img rounded-circle">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col ml--2">
                                        <!-- Title -->
                                        <h4 class="card-title mb-1 name">
                                            <a href="{{route('article.show',$article)}}">{{$article->title}}</a>
                                        </h4>
                                        <!-- Time -->
                                        <p class="card-text small text-muted">
                                            <span class="fe fe-user "></span>{{$article->user->name}}<span class="fe fe-clock ml-3 "></span>
                                            {{$article->created_at->diffForHumans()}}
                                            <span class="fe fe-heart ml-2"> {{$article->favorite_num}}</span>
                                            <span class="fe fe-thumbs-up ml-2"> {{$article->zan_num}}</span>
                                        </p>

                                    </div>
                                    <div class="col-auto">
                                        <!-- Dropdown -->
                                        <div class="dropdown">
                                            <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fe fe-more-vertical"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="{{route('article.show',$article)}}" class="dropdown-item">
                                                    查看详情
                                                </a>
                                                @can('update',$article)
                                                <a href="{{route('article.edit',$article)}}" class="dropdown-item">
                                                    编辑
                                                </a>
                                                @endcan
                                                @can('delete',$article)
                                                <a href="javascript:;" onclick="del(this)" class="dropdown-item">
                                                    删除
                                                </a>
                                                <form action="{{route('article.destroy',$article)}}" method="post">
                                                    @csrf @method('DELETE')
                                                </form>
                                                    @endcan
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- / .row -->
                                    <hr>
                                @endforeach
                            </li>
                        </ul>
                    </div>
                </div>
                <ul class="pagination justify-content-center" role="navigation">
                    {{$articles->links()}}
                </ul>
            </div>
            <div class="col-sm-3">
                <div class="card">
                    <div class="card-header">
                        公告
                    </div>
                    <div class="card-body">
                        <a href="" class="text-muted">每晚直播</a>
                        <hr>
                        <a href="" class="text-muted">实战培训</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')

    <script>

        function del(obj) {
            if (confirm("你确定删除吗？")) {
                $(obj).next('form').trigger('submit');
            }
        }
    </script>
    @endpush
